<template>
  <div id="product">
    <!-- 搜索栏 -->
    <div class="sousuo">
      <el-form :inline="true">
        <el-form-item label="蔬菜名称">
          <el-input size="small" v-model="query.name"></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button size="small" type="primary" @click="handleQuery"
            >查询</el-button
          >
          <el-button size="small" type="success" @click="toAddHandler"
            >添加</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <el-table :data="productList">
      <el-table-column type="selection" width="55px"></el-table-column>
      <el-table-column label="蔬菜名称" prop="name"></el-table-column>
      <el-table-column label="种植时间" prop="time"></el-table-column>
      <el-table-column label="成熟时间" prop="quality"></el-table-column>
      <el-table-column label="主要销售地" prop="address"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <!-- <el-table-column label="产品主图" prop="photo"></el-table-column> -->

      <el-table-column label="操作" width="250px" align="center">
        <template v-slot="slot">
          <el-button
            type="warning"
            size="mini"
            @click="handleDeleteProduct(slot.row.id)"
            >删除</el-button
          >
          <el-button type="danger" @click="handleToEdit(slot.row)" size="mini"
            >修改</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click.prevent="toDetaialsHandler(slot.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      layout="prev, pager, next"
      @current-change="handlePageChange"
      :total="total"
      :pageSize="productList.pageSize"
      :current-page="1"
    >
    </el-pagination>
    <!-- 模态框 -->
    <el-dialog
      :title="title"
      @close="toCloseModel"
      :visible="visible"
      width="30%"
    >
      <el-form
        label-position="left"
        ref="productForm"
        :rules="rules"
        label-width="80px"
        :model="product"
      >
        <el-form-item label="蔬菜名称" prop="name">
          <el-input v-model="product.name"></el-input>
        </el-form-item>
        <el-form-item label="种植时间" prop="time">
          <el-input v-model="product.time"></el-input>
        </el-form-item>
        <el-form-item label="成熟时间" prop="quality">
          <el-input v-model="product.quality"></el-input>
        </el-form-item>
        <el-form-item label="销售地" prop="address">
          <el-input v-model="product.address"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="product.price"></el-input>
        </el-form-item>
        <!-- <el-form-item label="描述" prop="description">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="product.description"
            maxlength="30"
            show-word-limit
          >
          </el-input>
        </el-form-item> -->
        <el-form-item v-if='title == "修改产品" ' label="蔬菜主图" prop="photo">
                   <el-upload
                        class="upload-demo"
                        :on-remove="handleRemove"
                        action="#"
                        :on-preview="handlePreview"
                        :http-request="httpRequest"
                        list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click.prevent="toCloseModel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit('productForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>


<script>

import { mapActions, mapMutations, mapState } from "vuex";
import {get,post_form,get1} from '../../store/axios'
export default {
  data() {
    return {
      title:'添加产品',
      query: {},
      name: "产品管理",
      params: {
        page: 0,
        pageSize: 5,
      },
    //  fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
      product: {},
      row: {},
      rules: {
        name: [
          { required: true, message: "蔬菜名称不能为空", trigger: "blur" },
          // { min: 2, max: 6, message: "姓名的字数应该是2-6位" },
        ],
        time: [
          { required: true, message: "种植时间不能为空", trigger: "blur" },
          // { min: 2, max: 6, message: "密码的字数应该是2-6位" },
        ],
        quality: [
          { required: true, message: "成熟时间不能为空", trigger: "blur" },
        ],
        address: [{ required: true, message: "主要销售地不能为空", trigger: "blur" }],
        price: [
          { required: true, message: "蔬菜价格不能为空", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    ...mapState("product", ["visible", "message", "status", "total"]),
    ...mapState("product", {
      productList: "list",
    }),
    // ...mapState('category',{
    //     CategoryList:'list',
    // })
  },
  created() {
    this.queryProduct();
  },
  methods: {
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
    // 上传
    handlePreview(file){
      console.log('-----',file)
    },
    httpRequest(param){
     
      // 创建表单对象
      let formData = new FormData();
      
      // 后端接受参数 ，可以接受多个参数
      formData.append("file", param.file); //传输文件到后端
      formData.append("id", this.product.id); //另外携带的参数
      console.log('----',formData.get("file"))
      console.log('----',formData.get("id"))
      post_form('/greenHouse/file',formData).then((result)=>{
              if(result.data.status == "ok"){
                alert('上传成功')
              }
            })
    },
    //修改
    handleToEdit(row) {
      this.title = '修改产品'
      this.product = row;
      this.openModel();
    },
    // 删除
    handleDeleteProduct(id) {
      var that = this;
      this.deleteByIdProduct(id).then((res) => {
        this.$notify({
          title: "成功",
          message: this.message,
          type: "success",
        });
        that.queryProduct();
      });
    },
    // 跳转
    toDetaialsHandler(row) {
      this.$router.push({ name: "productDetail", params: { Id: row } });
    },
    toCloseModel() {
      this.closeModel();
    },
    toAddHandler() {
     
      this.product = {};
     
      this.openModel();
       this.title= '添加产品'
    },
    handleSubmit(productForm) {
      this.$refs[productForm].validate((valid) => {
        if (valid) {
          this.saveOrUpdateproduct(this.product).then(() => {
            this.queryProduct();
            this.$notify({
              type: "success",
              title: "成功",
              message: this.message,
            });
          });
        } else {
          return false;
        }
      });
    },
    ...mapMutations("App", ["resetCurrentView"]),
    ...mapActions("product", ["openModel", "closeModel"]),
    ...mapActions("product", {
      queryProduct: "query",
      saveOrUpdateproduct: "saveOrUpdate",
      deleteByIdProduct: "deleteById",
      vaguequery: "vaguequery",
    }),
    ...mapActions("category", {
      findAllCategory: "findAll",
    }),

    handlePageChange(page) {
      this.params.page = page - 1;
      this.queryProduct();
    },
    handleQuery() {
      var that = this;
      this.vaguequery(this.query);
      // setTimeout(()=>{
      //      this.queryProduct()
      // },1000)
    },
  },
};
</script>
<style scoped>
.sousuo {
  margin-left: 20px;
}
#product {
  padding: 20px;
}
</style>